<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
</head>

<body>
<div class="box">
    <div class="insert">
    </div>
    <table class="table table-hover" border="1" cellspacing="0" cellpadding="0">
        <thead >
        <tr >
            <th class="text-center">学生ID</th>
            <th class="text-center">学生姓名</th>
            <th class="text-center">学生密码</th>
            <th class="text-center">学生年龄</th>
            <th class="text-center">学生性别</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="st,itemSta:${studentPageInfo.list}">
            <td th:text="${itemSta.index+1}"></td>
            <td th:text="${st.studentname}"></td>
            <td th:text="${st.studentpswd}"></td>
            <td th:text="${st.studentage}"></td>
            <td th:text="${st.studentsex==1?'男':'女'}"></td>
        </tr>
        </tbody>
    </table>
</div>

<div class="as"><!--取自：https://blog.csdn.net/qq_15329947/article/details/101364287-->
    <div class="as one">
        当前第<span th:text="${studentPageInfo.pageNum}"></span> 页，
        共<span th:text="${studentPageInfo.pages}"></span> 页，
        <span th:text="${studentPageInfo.total}"></span>条记录
    </div>
    <ul class="as current" style="list-style: none">
        <!--th:if="${studentPageInfo.hasPreviousPage}"}-->
        <li th:if="${studentPageInfo.hasPreviousPage}"}><!--hasPreviousPage默认值为false， 如果有上一页，则不显示首页-->
            <a th:href="@{/list?pageNum=}+${1}">首页</a>
        </li>
        <li th:if="${studentPageInfo.hasPreviousPage}"><!--hasPreviousPage默认值为false， 如果有上一页，则不显示-->
            <a th:href="@{/list?pageNum=}+${studentPageInfo.prePage}">上一页</a>
        </li>
        <li th:each="nav:${studentPageInfo.navigatepageNums}"><!--navigatepageNums是一个数组：遍历所有导航页号。 -->
            <a th:href="@{/list?pageNum=}+${nav}" th:text="${nav}" th:if="${nav != studentPageInfo.pageNum}"></a><!--如果不是当前页则可以跳转其他页面。遍历展示-->
            <a th:class="${'active'}" th:if="${nav == studentPageInfo.pageNum}" th:text="${nav}"></a><!--如果是当前页则有样式。遍历 展示-->
        </li>
        <li th:if="${studentPageInfo.hasNextPage}"><!--hasNextPage默认值为false， 如果没有下一页，则不显示-->
            <a th:href="@{/list?pageNum=}+${studentPageInfo.nextPage}">下一页</a>
        </li>
        <li th:if="${studentPageInfo.pageNum < studentPageInfo.pages}"><!--如果当前页小于总页数则不显示尾页 -->
            <a th:href="@{/list?pageNum=}+${studentPageInfo.pages}">尾页</a>
        </li>
    </ul>
</div>



</body>
</html>
<style>
    .table-hover{
        text-align: center;
    }
    .as .current{
        width: 600px;
        text-align: center;
    }
    ul::after{
        content:"";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    ul{
        margin-left: -35px;
    }
    .one{
        margin-left: 15px;
    }
    ul a{
        text-decoration: none;
        display: inline-block;
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: center;

    }
    ul li{
        float: left;
        background: #ffc0cb;
        list-style: none;
        margin: 10px;
        border-radius: 10px;
    }
    .active{
        background-color: orange;
        border-radius: 10px;
    }

</style>